<template>
  <div class="container" style="margin-top:20px;">
    <module-title title="人才结构"></module-title>
    <div class="tabWrapper" style="margin-top:20px; margin-bottom:20px;">
      <div :class="[{'tab': currIndex != index}, {'tab-active': currIndex == index}]" v-for="(item, index) in tabs"
           :key="index" @click="onTabClick(index)">
        {{ item }}
      </div>
    </div>
    <div class="" v-show="currIndex == 0">
      <div class="flexbetween" style="justify-content: space-between">
        <div>
          <r-text text="学历占比" style="margin-left: 10px;"></r-text>
          <div class="chartbox yzjzbox" >
            <div ref="rcjgChart0" style="height:220px; width:250px;"></div>
            <div class="yzjzcircle"></div>
          </div>
        </div>
        <div>
          <r-text text="年龄占比" style="margin-left: 10px;"></r-text>
          <div class="progressbox">
            <div class="progresscontent" v-for="(item,index) in barlist0" :key="index">
              <div class="txtbox"><p>{{item.name}}</p></div>
              <div class="flexbetween"  style="align-items: center">
                <div class="progressbarbox" style="width:60%"><div class="progressbarcur" :style="{'width':item.percent+'%'}"></div> </div>
                <div class="txtbox" style="flex: 1"><p><span class="bluekey">{{item.value}}</span><b>人</b></p></div>
              </div>
            </div>
          </div>

        </div>
    </div>
    </div>
    <div class="" v-show="currIndex == 1">
      <div class="flexbetween" style="justify-content: space-between">
        <div>
          <r-text text="学历占比" style="margin-left: 10px;"></r-text>
          <div class="chartbox yzjzbox" >
            <div ref="rcjgChart1" style="height:220px; width:250px;"></div>
            <div class="yzjzcircle"></div>
          </div>
        </div>
        <div>
          <r-text text="年龄占比" style="margin-left: 10px;"></r-text>
          <div class="progressbox">
            <div class="progresscontent" v-for="(item,index) in barlist1" :key="index">
              <div class="txtbox"><p>{{item.name}}</p></div>
              <div class="flexbetween"  style="align-items: center">
                <div class="progressbarbox" style="width:60%"><div class="progressbarcur" :style="{'width':item.percent+'%'}"></div> </div>
                <div class="txtbox" style="flex: 1"><p><span class="bluekey">{{item.value}}</span><b>人</b></p></div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="" v-show="currIndex == 2">
      <div class="flexbetween" style="justify-content: space-between">
        <div>
          <r-text text="配套人员学历占比" style="margin-left: 10px;"></r-text>
          <div class="chartbox yzjzbox" >
            <div ref="rcjgChart2" style="height:220px; width:250px;"></div>
            <div class="yzjzcircle"></div>
          </div>
        </div>
        <div>
          <r-text text="群演学历占比" style="margin-left: 10px;"></r-text>
          <div class="chartbox yzjzbox" >
            <div ref="rcjgChart3" style="height:220px; width:250px;"></div>
            <div class="yzjzcircle"></div>
          </div>
<!--          <div class="progressbox">-->
<!--            <div class="progresscontent" v-for="(item,index) in barlist0" :key="index">-->
<!--              <div class="txtbox"><p>{{item.name}}</p></div>-->
<!--              <div class="flexbetween"  style="align-items: center">-->
<!--                <div class="progressbarbox" style="width:60%"><div class="progressbarcur" :style="{'width':item.percent+'%'}"></div> </div>-->
<!--                <div class="txtbox" style="flex: 1"><p><span class="bluekey">{{item.value}}</span><b>人</b></p></div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
    </div>


  </div>
</template>
<script>
import ModuleTitle from '../ModuleTitle.vue'
import RText from '../RText.vue';
import * as echarts from 'echarts';

export default {
  components: {ModuleTitle,RText},
  props: {
    data: {
      type: Object,
    }
  },
  data() {
    return {
      tabs: ['全部从业人员', '专业人员', '其他人员'],
      currIndex: 0,
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      numberList: [],
      myChart: null,
      barlist0:null,
      barlist1:null,
      barlist2:null,
    }
  },
  watch: {
    data: {
      handler(oldV, newV) {
        this.barlist0=this.data.agelist0
        this.barlist1=this.data.agelist1
        this.barlist2=this.data.agelist2
        setTimeout(() => {
          this.showChart(this.myChart1, 'rcjgChart0', this.getChartOption1());
          this.showChart(this.myChart2, 'rcjgChart1', this.getChartOption2())
          this.showChart(this.myChart3, 'rcjgChart2', this.getChartOption3())
          this.showChart(this.myChart4, 'rcjgChart3', this.getChartOption4())
        }, 100);
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    onTabClick(index) {
      this.currIndex = index;
      // this.showChart(this.currIndex);
      this.$nextTick(() => {
        if (index == 0) {
          this.showChart(this.myChart1, 'rcjgChart0', this.getChartOption1());
        } else if (index == 1) {
          this.showChart(this.myChart2, 'rcjgChart1', this.getChartOption2())
        } else {
          this.showChart(this.myChart3, 'rcjgChart2', this.getChartOption3())
          this.showChart(this.myChart4, 'rcjgChart3', this.getChartOption4())
        }
      })
    },
    showChart(instance, id, option) {
      if (!instance) {
        instance = echarts.init(this.$refs[id]);
      } else {
        instance.clear();
      }
      instance.setOption(option);

    },
    getChartOption1() {
      let color = ['#0884FF', '#65D2FF', '#30D158', '#FFA00A', '#FF453A', '#E06DFF', '#C900FF']
      let objData = this.array2obj(this.data.list0, 'name')
      let sum = 0;
      this.data.list0.map(item=>{
        sum+=item.value
      })
      return {
        // title: {
        //   text: '{name|总支出}\n{value|' + sum + '}\n{unit|亿元}',
        //   textAlign: 'center',
        //   left: '18%',
        //   top: '30%',
        //   textStyle: {
        //     rich: {
        //       name: {
        //         color: '#fff',
        //         fontSize: 16
        //       },
        //       value: {
        //         height: 40,
        //         color: '#fff',
        //         fontSize: 20,
        //         fontFamily: 'DINPro-Medium'
        //       },
        //       unit: {
        //         fontSize: 16,
        //         color: 'rgba(255,255,255,0.72)'
        //       }
        //     }
        //   }
        // },
        legend: {
          top: '75%',
          left: '20%',
          right:'20%',
          itemWidth: 10,
          itemHeight: 10,
          icon: 'rect',
          data: this.data.list0,
          //  itemGap: 30,
          // orient: 'vertical',
          formatter: function (name) {
         //   console.log(name)
            let per = ((objData[name].value/sum)*100).toFixed(0)
            return '{title|' + name + '}'
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
              },
              value: {
                fontFamily: 'DINPro-Medium',
                fontSize: 14,
                color: '#64E6E2',
                align: 'left',
                padding:[0, 0, 0, 20]

              },
              unit: {
                fontFamily: 'SourceHanSansCNB',
                fontSize: 16,
                color: 'rgba(255,255,255,0.72)',
                padding: [12, 0, 0, 0]
              }
            }
          }
        },
        series: [{
          type: 'pie',
          center: ['55%', '35%'],
          radius: ['47%', '63%'],
          itemStyle: {
            color: params => color[params.dataIndex]
          },
          labelLine: {
            show: false
          },
          label: {
            show: true,
            position: 'center',
            fontSize: 14,
            lineHeight: 28,
            color: 'rgba(255,255,255,0.8)',
            formatter: params => {
              let str = `{per| ${params.percent}%}\n{name|${params.name}}`
              return str
            },
            rich: {
              name: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.88)'
              },
              per: {
                fontSize: 20,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'DINPro-Medium',
              }
            }
          },
          z: 3,
          data: this.data.list0.map(item => {
            return {
              ...item,
              emphasis: {
                label: {
                  show: false
                }
              }
            }
          })
        }]
      }

    },
    getChartOption2() {
      let color = ['#0884FF', '#65D2FF', '#30D158', '#FFA00A', '#FF453A', '#E06DFF', '#C900FF']
      let objData = this.array2obj(this.data.list1, 'name')
      let sum = 0;
      this.data.list1.map(item=>{
        sum+=item.value
      })
      return {
        // title: {
        //   text: '{name|总支出}\n{value|' + sum + '}\n{unit|亿元}',
        //   textAlign: 'center',
        //   left: '18%',
        //   top: '30%',
        //   textStyle: {
        //     rich: {
        //       name: {
        //         color: '#fff',
        //         fontSize: 16
        //       },
        //       value: {
        //         height: 40,
        //         color: '#fff',
        //         fontSize: 20,
        //         fontFamily: 'DINPro-Medium'
        //       },
        //       unit: {
        //         fontSize: 16,
        //         color: 'rgba(255,255,255,0.72)'
        //       }
        //     }
        //   }
        // },
        legend: {
          top: '75%',
          left: '20%',
          right:'20%',
          itemWidth: 10,
          itemHeight: 10,
          icon: 'rect',
          data: this.data.list0,
          //  itemGap: 30,
          // orient: 'vertical',
          formatter: function (name) {
            console.log(name)
            let per = ((objData[name].value/sum)*100).toFixed(0)
            return '{title|' + name + '}'
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
              },
              value: {
                fontFamily: 'DINPro-Medium',
                fontSize: 14,
                color: '#64E6E2',
                align: 'left',
                padding:[0, 0, 0, 20]

              },
              unit: {
                fontFamily: 'SourceHanSansCNB',
                fontSize: 16,
                color: 'rgba(255,255,255,0.72)',
                padding: [12, 0, 0, 0]
              }
            }
          }
        },
        series: [{
          type: 'pie',
          center: ['55%', '35%'],
          radius: ['47%', '63%'],
          itemStyle: {
            color: params => color[params.dataIndex]
          },
          labelLine: {
            show: false
          },
          label: {
            show: true,
            position: 'center',
            fontSize: 14,
            lineHeight: 28,
            color: 'rgba(255,255,255,0.8)',
            formatter: params => {
              let str = `{per| ${params.percent}%}\n{name|${params.name}}`
              return str
            },
            rich: {
              name: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.88)'
              },
              per: {
                fontSize: 20,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'DINPro-Medium'
              }
            }
          },
          z: 3,
          data: this.data.list1.map(item => {
            return {
              ...item,
              emphasis: {
                label: {
                  show: false
                }
              }
            }
          })
        }]
      }

    },
    getChartOption3() {
      let color = ['#0884FF', '#65D2FF', '#30D158', '#FFA00A', '#FF453A', '#E06DFF', '#C900FF']
      let objData = this.array2obj(this.data.list2, 'name')
      let sum = 0;
      this.data.list2.map(item=>{
        sum+=item.value
      })
      return {
        // title: {
        //   text: '{name|总支出}\n{value|' + sum + '}\n{unit|亿元}',
        //   textAlign: 'center',
        //   left: '18%',
        //   top: '30%',
        //   textStyle: {
        //     rich: {
        //       name: {
        //         color: '#fff',
        //         fontSize: 16
        //       },
        //       value: {
        //         height: 40,
        //         color: '#fff',
        //         fontSize: 20,
        //         fontFamily: 'DINPro-Medium'
        //       },
        //       unit: {
        //         fontSize: 16,
        //         color: 'rgba(255,255,255,0.72)'
        //       }
        //     }
        //   }
        // },
        legend: {
          top: '75%',
          left: '20%',
          right:'20%',
          itemWidth: 10,
          itemHeight: 10,
          icon: 'rect',
          data: this.data.list0,
          //  itemGap: 30,
          // orient: 'vertical',
          formatter: function (name) {
            console.log(name)
            let per = ((objData[name].value/sum)*100).toFixed(0)
            return '{title|' + name + '}'
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
              },
              value: {
                fontFamily: 'DINPro-Medium',
                fontSize: 14,
                color: '#64E6E2',
                align: 'left',
                padding:[0, 0, 0, 20]

              },
              unit: {
                fontFamily: 'SourceHanSansCNB',
                fontSize: 16,
                color: 'rgba(255,255,255,0.72)',
                padding: [12, 0, 0, 0]
              }
            }
          }
        },
        series: [{
          type: 'pie',
          center: ['55%', '35%'],
          radius: ['47%', '63%'],
          itemStyle: {
            color: params => color[params.dataIndex]
          },
          labelLine: {
            show: false
          },
          label: {
            show: true,
            position: 'center',
            fontSize: 14,
            lineHeight: 28,
            color: 'rgba(255,255,255,0.8)',
            formatter: params => {
              let str = `{per| ${params.percent}%}\n{name|${params.name}}`
              return str
            },
            rich: {
              name: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.88)'
              },
              per: {
                fontSize: 20,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'DINPro-Medium'
              }
            }
          },
          z: 3,
          data: this.data.list2.map(item => {
            return {
              ...item,
              emphasis: {
                label: {
                  show: false
                }
              }
            }
          })
        }]
      }

    },
    getChartOption4() {
      let color = ['#0884FF', '#65D2FF', '#30D158', '#FFA00A', '#FF453A', '#E06DFF', '#C900FF']
      let objData = this.array2obj(this.data.agelist2, 'name')
      let sum = 0;
      this.data.agelist2.map(item=>{
        sum+=item.value
      })
      return {
        // title: {
        //   text: '{name|总支出}\n{value|' + sum + '}\n{unit|亿元}',
        //   textAlign: 'center',
        //   left: '18%',
        //   top: '30%',
        //   textStyle: {
        //     rich: {
        //       name: {
        //         color: '#fff',
        //         fontSize: 16
        //       },
        //       value: {
        //         height: 40,
        //         color: '#fff',
        //         fontSize: 20,
        //         fontFamily: 'DINPro-Medium'
        //       },
        //       unit: {
        //         fontSize: 16,
        //         color: 'rgba(255,255,255,0.72)'
        //       }
        //     }
        //   }
        // },
        legend: {
          top: '75%',
          left: '20%',
          right:'20%',
          itemWidth: 10,
          itemHeight: 10,
          icon: 'rect',
          data: this.data.agelist2,
          //  itemGap: 30,
          // orient: 'vertical',
          formatter: function (name) {
            console.log(name)
            let per = ((objData[name].value/sum)*100).toFixed(0)
            return '{title|' + name + '}'
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
              },
              value: {
                fontFamily: 'DINPro-Medium',
                fontSize: 14,
                color: '#64E6E2',
                align: 'left',
                padding:[0, 0, 0, 20]

              },
              unit: {
                fontFamily: 'SourceHanSansCNB',
                fontSize: 16,
                color: 'rgba(255,255,255,0.72)',
                padding: [12, 0, 0, 0]
              }
            }
          }
        },
        series: [{
          type: 'pie',
          center: ['55%', '35%'],
          radius: ['47%', '63%'],
          itemStyle: {
            color: params => color[params.dataIndex]
          },
          labelLine: {
            show: false
          },
          label: {
            show: true,
            position: 'center',
            fontSize: 14,
            lineHeight: 28,
            color: 'rgba(255,255,255,0.8)',
            formatter: params => {
              let str = `{per| ${params.percent}%}\n{name|${params.name}}`
              return str
            },
            rich: {
              name: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.88)'
              },
              per: {
                fontSize: 20,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'DINPro-Medium'
              }
            }
          },
          z: 3,
          data: this.data.agelist2.map(item => {
            return {
              ...item,
              emphasis: {
                label: {
                  show: false
                }
              }
            }
          })
        }]
      }

    },

    array2obj (array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
  }

}
</script>
<style lang="less" scoped>
.titledot{
  line-height: 42px;
  background:url("../../assets/dotp.svg") no-repeat left center;
  padding-left: 32px;
}
.container {
  height: 460px;
  background-image: linear-gradient(180deg, rgba(8, 132, 255, 0.00) 0%, rgba(8, 132, 255, 0.12) 100%);
}

.flex {
  display: flex;
  background-image: linear-gradient(270deg, rgba(8, 132, 255, 0.00) 0%, rgba(8, 132, 255, 0.24) 100%);
  height: 56px;
  margin: 20px 20px 0 20px;
  align-items: center;
  padding: 0 0 0 12px;
}
.flexbetween{
  display: flex;
  justify-content: space-between;
  &>div{
    flex: 1;
  }
}

.number {
  // border-image: linear-gradient(180deg, rgba(8,132,255,0.40) 0%, rgba(8,132,255,0.00) 51%, rgba(8,132,255,0.72) 100%);
  border-width: 1px;
  border-style: solid;
  border-color: red;
  font-family: DINPro-Medium;
  font-size: 20px;
  color: #64E6E2;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 28px;
  font-weight: 500;
  margin-right: 4px;
  width: 24px;
  height: 28px;
  border-image: linear-gradient(180deg, rgba(8, 132, 255, 0.40) 0%, rgba(8, 132, 255, 0.00) 51%, rgba(8, 132, 255, 0.72) 100%) 1;
}

.tabWrapper {
  display: flex;
  position: relative;
  padding-right: 24px;
  cursor: pointer;
}

.tab {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0.96px;
  text-align: center;
  font-weight: 400;
  border: 1px solid rgba(4, 74, 143, 1);
  padding: 4px 0;
  text-align: center;
  flex: 1;

  &-active {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    text-align: center;
    font-weight: 400;
    border: 1px solid rgba(100, 230, 226, 1);
    padding: 4px 0;
    text-align: center;
    flex: 1;
    color: #64E6E2;
  }
}
.chartbox {
  height: 155px;
  position: relative;
  margin:20px auto;
  &.yzjzbox {
    width: 100%;
    height: 100%;
    background: url(../../assets/piebg.svg) no-repeat center top /155px 155px;
    position: relative;
    .yzjzcircle {
      width: 100px;
      height: 100px;
      background: url(../../assets/pied.png) no-repeat center / 100px 100px;
      position: absolute;
      left: 87px;
      top: 28px;
      animation: rotate1 3s linear infinite forwards;
    }
  }
  &.yzjzbox2 {
    width: 100%;
    height: 150px;
    background: url(../../assets/piebg.svg) no-repeat left top /150px 150px;
    position: relative;
  }
}
.tmpbox{
  width:100%;
  height:250px;
  background:url(../../assets/tmp.png) no-repeat center top /220px 250px;
  margin-top:20px;

}
.progressbox{
  margin-top:20px;
  margin-left: 20px;
  .progresscontent{
    .progressbarbox{
      height:8px;
      background: rgba(8,132,255,0.24);
      position: relative;
      .progressbarcur{
        height:4px;
        width:0;
        position: absolute;
        left:2px;
        top:2px;
        background-image: linear-gradient(270deg, #64E6E2 0%, #0884FF 100%);
        &.orange{
          background-image: linear-gradient(270deg, #FF453A 0%, #FFA00A 100%);
        }
      }
    }
    .txtbox{
      p{
        line-height: 24px;
        text-align: left;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 0.96px;
        margin: 0;
        padding: 0;
        span{
          font-family: DINPro-Medium;
          font-size: 20px;
          color: #FFFFFF;
          letter-spacing: 1.2px;
          &.bluekey{
            font-size: 16px;
            color: #64E6E2;
            letter-spacing: 0.96px;
            font-weight: 600;
            padding:0 5px;
          }
        }
        b{
          color: rgba(255,255,255,.7);
          font-weight: normal;
        }
      }
    }
  }
}

@keyframes rotate1{
  0%{
    transform: rotate(0) scale(1);
  }
  100%{
    transform: rotate(-360deg) scale(1);
  }
}
</style>
